<template>
  <div class="the-box">
    <i @click="toggle" class="el-icon-s-operation icon-head"></i>
    <el-menu
      default-active="authList"
      class="el-menu-vertical-demo menus"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      hide-timeout="100"
      show-timeout="100"
      unique-opened
      router
    >
      <el-submenu :index="item.path" v-for="item in routers" :key="item.path">
        <template slot="title">
          <i :class="item.meta.icon"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </template>
        <el-menu-item :index="item.path">
          {{ item.meta.names }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      routers: [],
    };
  },
  methods: {
    getRoute() {
      this.routers = this.$router.options.routes[1].children;
      console.log("路由", this);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toggle() {
      this.isCollapse = !this.isCollapse;
      this.$emit("sendColapse", this.isCollapse);
    },
  },
  mounted() {
    this.getRoute();
  },
};
</script>
<style scoped>
.menus .el-menu-item.is-active {
  color: red;
}
.icon-head {
  font-size: 30px;
}
</style>